@import "utils/scss_variables.module.scss";

$checkbox-size: 20px;
$checkmark-size: 6px;

.form-field-wrapper.checkbox-field-wrapper {
  .checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;

    .inner-checkbox-wrapper {
      position: relative;
      width: $checkbox-size;

      .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: $checkbox-size;
        width: $checkbox-size;
        background-color: white;
        border: 1px solid $color-grey-light;
        border-radius: 2px;
        box-sizing: border-box;

        &:after {
          content: "";
          position: absolute;
          display: none;
          width: $checkmark-size;
          height: calc(#{$checkmark-size} + 6px);
          top: 1px;
          left: 5px;
          border: solid $color-main-light;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
        }
        &.half-selected:after {
          border: none;
          background-color: $color-main-light;
          transform: rotate(0deg);
          display: block;
        }
      }

      input {
        opacity: 0;
        cursor: pointer;

        &:checked ~ .checkmark {
          &:after {
            display: block;
          }
        }
      }
    }
    .checkbox-title {
      margin-left: 10px;
    }
    &.disabled {
      cursor: not-allowed;
      color: $color-grey;

      input {
        cursor: not-allowed;
      }
      .checkmark {
        border-color: $color-grey-light;
      }
    }
  }
}
